<section id="textarea"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Textarea</h2>
    <a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-col gap-y-10">
      <textarea class="textarea" placeholder="Type your message here"></textarea>
      <textarea class="textarea" placeholder="Type your message here" aria-invalid="true"></textarea>
      <div class="grid gap-3">
        <label for="textarea-demo-label" class="label">Label</label>
        <textarea id="textarea-demo-label" class="textarea" placeholder="Type your message here"></textarea>
      </div>
      <div class="grid gap-3">
        <label for="textarea-demo-label-and-description" class="label">With label and description</label>
        <textarea id="textarea-demo-label-and-description" class="textarea" placeholder="Type your message here"></textarea>
        <p class="text-muted-foreground text-sm">Type your message and press enter to send.</p>
      </div>
      <div class="grid gap-3">
        <label for="textarea-demo-disabled" class="label">Disabled</label>
        <textarea id="textarea-demo-disabled" class="textarea" placeholder="Type your message here" disabled></textarea>
      </div>
    </div>
  </div>
</section>